<template>
  <div class="process">
    <div class="list-wrap">
      <div class="item">
        <yd-tab>
          <yd-tab-panel label="待接单" v-if="listLabel.includes('1')">
            <yd-infinitescroll :callback="loadMoreOne" ref="loadMoreOne" v-if="listLabel.includes('1')">
              <div slot="list">
                <div>
                  <group v-for="(item,index) in roleOneData" :key="index" @click.native="toPageDetail(item.orderid,item.state)">
                    <cell title="订单号" :value="item.orderCode"></cell>
                    <cell-form-preview :list="item.list"></cell-form-preview>
                  </group>
                </div>
                <div class="no-list" v-if="roleOneData.length ===0">
                  <img :src="noneimg">
                  <div class="text">空空如也~~</div>
                </div>
              </div>
              <span slot="doneTip" class="nodata-text">我是有底线的</span>
              <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading12.svg" />
            </yd-infinitescroll>
          </yd-tab-panel>
          <yd-tab-panel label="待加工" v-if="listLabel.includes('2')">
            <yd-infinitescroll :callback="loadMoreTwo" ref="loadMoreTwo" v-if="listLabel.includes('2')">
              <div slot="list">
                <div>
                  <group v-for="(item,index) in roleTwoData" :key="index" @click.native="toPageDetail(item.orderid,item.state)">
                    <cell title="订单号" :value="item.orderCode"></cell>
                    <cell-form-preview :list="item.list"></cell-form-preview>
                  </group>
                </div>
                <div class="no-list" v-if="roleTwoData.length ===0">
                  <img :src="noneimg">
                  <div class="text">空空如也~~</div>
                </div>
              </div>
              <span slot="doneTip" class="nodata-text">我是有底线的</span>
              <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading12.svg" />
            </yd-infinitescroll>
          </yd-tab-panel>
          <yd-tab-panel label="待包装" v-if="listLabel.includes('3')">
            <yd-infinitescroll :callback="loadMoreThree" ref="loadMoreThree" v-if="listLabel.includes('3')">
              <div slot="list">
                <div>
                  <group v-for="(item,index) in roleThreeData" :key="index" @click.native="toPageDetail(item.orderid,item.state)">
                    <cell title="订单号" :value="item.orderCode"></cell>
                    <cell-form-preview :list="item.list"></cell-form-preview>
                  </group>
                </div>
                <div class="no-list" v-if="roleThreeData.length ===0">
                  <img :src="noneimg">
                  <div class="text">空空如也~~</div>
                </div>
              </div>
              <span slot="doneTip" class="nodata-text">我是有底线的</span>
              <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading12.svg" />
            </yd-infinitescroll>
          </yd-tab-panel>
          <yd-tab-panel label="待发货" v-if="listLabel.includes('4')">
            <yd-infinitescroll :callback="loadMoreFour" ref="loadMoreFour" v-if="listLabel.includes('4')">
              <div slot="list">
                <div>
                  <group v-for="(item,index) in roleFourData" :key="index" @click.native="toPageDetail(item.orderid,item.state)">
                    <cell title="订单号" :value="item.orderCode"></cell>
                    <cell-form-preview :list="item.list"></cell-form-preview>
                  </group>
                </div>
                <div class="no-list" v-if="roleFourData.length ===0">
                  <img :src="noneimg">
                  <div class="text">空空如也~~</div>
                </div>
              </div>
              <span slot="doneTip" class="nodata-text">我是有底线的</span>
              <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading12.svg" />
            </yd-infinitescroll>
          </yd-tab-panel>
          <yd-tab-panel label="已完成" v-if="listLabel.includes('5')">
            <yd-infinitescroll :callback="loadMoreFive" ref="loadMoreFive" v-if="listLabel.includes('5')">
              <div slot="list">
                <div>
                  <group v-for="(item,index) in roleFiveData" :key="index" @click.native="toPageDetail(item.orderid,item.state)">
                    <cell title="订单号" :value="item.orderCode"></cell>
                    <cell-form-preview :list="item.list"></cell-form-preview>
                  </group>
                </div>
                <div class="no-list" v-if="roleFiveData.length ===0">
                  <img :src="noneimg">
                  <div class="text">空空如也~~</div>
                </div>
              </div>
              <span slot="doneTip" class="nodata-text">我是有底线的</span>
              <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading12.svg" />
            </yd-infinitescroll>
          </yd-tab-panel>
        </yd-tab>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import getUrl from "../../../static/js/getUrl.js";
  import apis from '../../../static/js/api.js'
  import noneimg from '@/assets/img/none.svg'
  import {
    CellFormPreview,
    Group,
    Cell
  } from "vux";
  export default {
    components: {
      CellFormPreview,
      Group,
      Cell,
    },
    data() {
      return {
        listLabel: [], // tab栏的数据
        // 页数初始值
        noneimg,
        pageOne: 1,
        pageTwo: 1,
        pageThree: 1,
        pageFour: 1,
        pageFive: 1,
        // 页数初始值
        pagesize: 10, // 每页请求的数据条数
        // 用户角色数据
        roleOneData: [],
        roleTwoData: [],
        roleThreeData: [],
        roleFourData: [],
        roleFiveData: [],
        // 用户角色数据
        wxuserinfoid: '', //微信用户id
        userInfo: {} //用户信息
      };
    },
    computed: {},
    created() {
      // 从地址链接上取微信用户id
      this.wxuserinfoid = getUrl().wxuserinfoid;
      if (this.wxuserinfoid) {
        // 可以进行后续的操作
        this.postUserInfo()
      } else {
        // 否则的话没有用户id,提示用户信息不存在，请重试或联系管理员
        this.$vux.alert.show({
          title: '错误提示',
          content: '用户信息不存在，请重试或联系管理员',
        })
      }
    },
    mounted() {},
    methods: {
      postUserInfo() {
        this.$vux.loading.show({
          text: "正在加载"
        });
        var qs = require('querystring')
        this.$axios.post(`${apis}/auth/messagep`,
            qs.stringify({
              vid: this.wxuserinfoid
            }))
          .then(response => {
            if (response.data) {
              this.$vux.loading.hide();
              this.userInfo = response.data;
              localStorage.setItem('userInfo', JSON.stringify(this.userInfo));
              if (this.userInfo.wxuserinfo.isstaff === 0) {
                // 没有权限 ，提示没有访问权限·
                this.$vux.alert.show({
                  title: '错误提示',
                  content: '您没有访问权限',
                })
              } else {
                this.getUserType();
              }
            }
          })
          .catch(error => {
            console.log(error)
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 获取用户类型
      getUserType() {
        let userTypeStr = JSON.parse(localStorage.getItem('userInfo')).wxuserinfo.audittype;
        let changeArr = userTypeStr.split("_");
        this.listLabel = changeArr;
        this.listLabel.forEach(ele => {
          if (ele === "1") {
            this.postRoleData('1', 1);
          } else if (ele === "2") {
            this.postRoleData('2', 1);
          } else if (ele === "3") {
            this.postRoleData('3', 1);
          } else if (ele === "4") {
            this.postRoleData('4', 1);
          } else if (ele === "5") {
            this.postRoleData('5', 1);
          }
        });
      },
      // 获取角色的数据
      postRoleData(role, page) {
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: role,
                page: page,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          )
          .then(response => {
            switch (role) {
              case '1':
                this.roleOneData = response.data;
                this.pageOne++;
                break;
              case '2':
                this.roleTwoData = response.data;
                this.pageTwo++;
                break;
              case '3':
                this.roleThreeData = response.data;
                this.pageThree++;
                break;
              case '4':
                this.roleFourData = response.data;
                this.pageFour++;
                break;
              case '5':
                this.roleFiveData = response.data;
                this.pageFive++;
                break;
              default:
            }
          })
          .catch(error => {
            console.log(error);
            this.$vux.loading.hide();
            this.$dialog.toast({
              mes: "服务器异常"
            });
          });
      },
      // 获取角色1的更多数据
      loadMoreOne() {
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "1",
                page: this.pageOne,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          ).then((response) => {
            const _list = response.data
            this.roleOneData = [...this.roleOneData, ..._list]
            if (_list.length < this.pagesize) {
              /* 所有数据加载完毕 */
              this.$refs.loadMoreOne.$emit('ydui.infinitescroll.loadedDone')
              return
            }
            /* 单次请求数据完毕 */
            this.$refs.loadMoreOne.$emit('ydui.infinitescroll.finishLoad')
            this.pageOne++
          }).catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 获取角色2的更多数据
      loadMoreTwo() {
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "2",
                page: this.pageTwo,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          ).then((response) => {
            const _list = response.data
            this.roleTwoData = [...this.roleTwoData, ..._list]
            if (_list.length < this.pagesize) {
              /* 所有数据加载完毕 */
              this.$refs.loadMoreTwo.$emit('ydui.infinitescroll.loadedDone')
              return
            }
            /* 单次请求数据完毕 */
            this.$refs.loadMoreTwo.$emit('ydui.infinitescroll.finishLoad')
            this.pageTwo++
          }).catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 获取角色3的更多数据
      loadMoreThree() {
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "3",
                page: this.pageThree,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          ).then((response) => {
            const _list = response.data
            this.roleThreeData = [...this.roleThreeData, ..._list]
            if (_list.length < this.pagesize) {
              /* 所有数据加载完毕 */
              this.$refs.loadMoreThree.$emit('ydui.infinitescroll.loadedDone')
              return
            }
            /* 单次请求数据完毕 */
            this.$refs.loadMoreThree.$emit('ydui.infinitescroll.finishLoad')
            this.pageThree++
          }).catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 获取角色4的更多数据
      loadMoreFour() {
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "4",
                page: this.pageFour,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          ).then((response) => {
            const _list = response.data
            this.roleFourData = [...this.roleFourData, ..._list]
            if (_list.length < this.pagesize) {
              /* 所有数据加载完毕 */
              this.$refs.loadMoreFour.$emit('ydui.infinitescroll.loadedDone')
              return
            }
            /* 单次请求数据完毕 */
            this.$refs.loadMoreFour.$emit('ydui.infinitescroll.finishLoad')
            this.pageFour++
          }).catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 获取角色5的更多数据
      loadMoreFive() {
        this.$axios
          .post(
            `${apis}/app/order/orderlist`,
            this.confusion(
              JSON.stringify({
                ordertype: "5",
                page: this.pageFive,
                pagesize: this.pagesize
              })
            ), {
              headers: {
                Authorization: "Bearer " +
                  JSON.parse(window.localStorage.getItem("userInfo")).token,
                "Content-Type": "application/json;charset=UTF-8",
                "Cache-Control": "no-cache",
                isApp: "isApp"
              }
            }
          ).then((response) => {
            const _list = response.data
            this.roleFiveData = [...this.roleFiveData, ..._list]
            if (_list.length < this.pagesize) {
              /* 所有数据加载完毕 */
              this.$refs.loadMoreFive.$emit('ydui.infinitescroll.loadedDone')
              return
            }
            /* 单次请求数据完毕 */
            this.$refs.loadMoreFive.$emit('ydui.infinitescroll.finishLoad')
            this.pageFive++
          }).catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      },
      // 调转到订单详情页
      toPageDetail(id, wxuserinfoid) {
        this.$router.push({
          path: "/detail",
          query: {
            id: id,
            wxuserinfoid: this.wxuserinfoid
          }
        });
      }
    }
  };
</script>

<style scoped>
  .no-list {
    width: 60%;
    margin: 50px auto;
  }
  .text {
    width: 70%;
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
  }
  .process{
    position: fixed;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
</style>
